<!--
author:        hejiyang <silentmanager@163.com>
date:          2024-11-09 23:08:31
component:     operation
Copyright © YourCompanyName All rights reserved
-->
<template>
  <el-dialog
    :destroy-on-close="true"
    :title="dialogTitle"
    v-model="isVisible"
    @close="handleClose"
    width="800px"
  >
    <FormComponent
      :initialValues="initialValues"
      :config="formConfig"
      ref="formComponentRef"
      @submit="handleFormSubmit"
      :disabled="disabled"
      :useGrid="true"
      :rules="rules"
      label-position="left"
    />
    <template v-if="!disabled" #footer>
      <el-button @click="handleClose">关闭</el-button>
      <el-button :loading="loading" type="primary" @click="handleSave">保存</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { MODALTYPE } from '@/types/ref'
import { ref, watch, defineProps, defineEmits } from 'vue'
import FormComponent from '@/components/FormComponent/index.vue'
import {
  createDrinkInventory,
  getDrinkInventory,
  updateDrinkInventory
} from '@/api/drinks/drinks-put'
interface Props {
  visible: boolean
  modalType: MODALTYPE
  id?: string
}
const props = defineProps<Props>()
const emit = defineEmits<{
  (e: 'update:visible', value: boolean): void
  (e: 'refreshTable'): void
}>()
// ==================== 表单  ====================
const loading = ref(false)
const formComponentRef = ref<InstanceType<typeof FormComponent> | null>(null)
const initialValues = ref({})
// 提交的函数
const handleFormSubmit = async (formData: Record<string, any>) => {
  try {
    loading.value = true
    let res
    if (props.modalType === MODALTYPE.ADD) {
      res = await createDrinkInventory({
        ...formData
      })
    } else {
      res = await updateDrinkInventory({
        ...formData,
        id: props.id
      })
    }
    ElMessage({
      showClose: true,
      message: '操作成功',
      type: 'success'
    })
    emit('refreshTable')
    handleClose()
    loading.value = false
  } catch (e) {
    console.error(e)
    loading.value = false
  }
}
// 保存函数
const handleSave = () => {
  formComponentRef.value?.handleSubmit()
}
const rules = {
  drinkName: [{ required: true, message: '请输入酒水名称', trigger: 'change' }],
  price: [{ required: true, message: '请输入价格', trigger: 'change' }],
  bottleCount: [{ required: true, message: '请输入瓶数', trigger: 'change' }],
  packageCount: [{ required: true, message: '请输入包裹数', trigger: 'change' }],
  stock: [{ required: true, message: '请输入库存数量', trigger: 'change' }],
  bonusRule: [{ required: true, message: '请输入自定义奖金规则', trigger: 'change' }]
}
const formConfig = [
  {
    label: '酒水名称',
    prop: 'drinkName',
    type: 'input',
    options: { placeholder: '请输入酒水名称' }
  },
  {
    label: '价格',
    prop: 'price',
    type: 'number',
    options: { placeholder: '请输入价格', precision: '2', style: { width: '200px' } }
  },
  {
    label: '销售额',
    prop: 'revenue',
    type: 'number',
    options: { placeholder: '默认等于价格', precision: '2', style: { width: '200px' } }
  },
  {
    label: '瓶数',
    prop: 'bottleCount',
    type: 'number',
    options: { placeholder: '请输入瓶数', precision: '0', style: { width: '200px' } }
  },
  {
    label: '包裹数',
    prop: 'packageCount',
    type: 'number',
    options: { placeholder: '请输入包裹数', precision: '0', style: { width: '200px' } }
  },
  {
    label: '库存数量',
    prop: 'stock',
    type: 'number',
    options: { placeholder: '请输入库存数量', precision: '0', style: { width: '200px' } }
  },
  {
    label: '自定义奖金规则',
    prop: 'bonusRule',
    type: 'number',
    options: { placeholder: '请输入奖金规则', precision: '2', style: { width: '200px' } }
  },
  {
    label: '是否上架',
    prop: 'isListed',
    type: 'radio',
    options: {
      options: [
        { label: '是', value: 1 },
        { label: '否', value: 0 }
      ]
    }
  }
]

// ==================== 弹窗状态  ====================
// 局部状态变量，用于管理弹窗的可见性
const isVisible = ref<boolean>(props.visible)
// 关闭弹窗的处理函数
const handleClose = () => {
  isVisible.value = false // 设置局部状态
  emit('update:visible', false) // 通知父组件
  initialValues.value = {} // 关闭时清空表单数据
}
// 监视 props.visible 的变化，以更新局部状态
watch(
  () => props.visible,
  (newValue) => {
    isVisible.value = newValue
  }
)
// 动态标题
const dialogTitle = computed(() => {
  switch (props.modalType) {
    case MODALTYPE.ADD:
      return '新增酒水'
    case MODALTYPE.EMIT:
      return '编辑酒水'
    case MODALTYPE.DETAIL:
      return '查看酒水详情'
    default:
      return '操作'
  }
})
// 禁用
const disabled = computed(() => props.modalType === MODALTYPE.DETAIL)
// 根据类型加载数据
const loadFormData = async () => {
  if (props.modalType === MODALTYPE.EMIT || props.modalType === MODALTYPE.DETAIL) {
    const res = await getDrinkInventory(props.id as string)
    initialValues.value = { ...res, isListed: res.isListed ? 1 : 0 }
  } else {
    initialValues.value = {} // 新增时清空表单
  }
}
watch(
  () => props.visible,
  (newValue) => {
    isVisible.value = newValue
    if (newValue) {
      loadFormData() // 弹窗打开时根据类型加载数据
    }
  }
)
</script>

<style scoped>
/* 您的样式 */
</style>
